import { useContext } from "react";
import GanttContext from "../../../context";
import { getTaskBarPosition, cn } from "../../../helpers/utils";
import TaskBar from "./task-bar";
import type { RenderItemProps } from "../../../components/virtual-list";

export default function GanttTableItem({ task, index }: RenderItemProps) {
  const { taskMode, tasksStart, hoverTaskId, setHoverTaskId } = useContext(GanttContext);
  const [taskWidth, taskLeft] = getTaskBarPosition(taskMode, tasksStart, task.start, task.end);
  return (
    <div
      className={cn({
        "relative h-12 flex items-center hover:bg-orange-100 hover:cursor-pointer": true,
        "bg-gray-100": index % 2 !== 0,
        "bg-orange-50": task.id == hoverTaskId,
      })}
      onMouseOver={() => setHoverTaskId(task.id)}
      onMouseOut={() => setHoverTaskId("")}
      key={task.id}
    >
      <TaskBar taskLeft={taskLeft} taskWidth={taskWidth} task={task} />
    </div>
  )
}

